<template>
  <div class="ma-content-block p-4">
    <div class="flex justify_between" style="margin-bottom: 16px">
      <div class="flex align_center flex_1" style="margin-right: 40px">
        <div style="font-size: 18px; font-weight: 600; margin-right: 20px">
          {{ props.info.route_name }}
        </div>
        <div>
          <a-tag
            :color="
              detailDate.examine_result == 1
                ? '#86909c'
                : detailDate.examine_result == 2
                ? '#f53f3f'
                : '#00b42a'
            "
            >{{
              detailDate.examine_result == 1
                ? "待巡检"
                : detailDate.examine_result == 2
                ? "已超时"
                : "已巡检"
            }}</a-tag
          >
        </div>
      </div>
      <div class="flex">
        <div style="margin-right: 20px">负责人：张三</div>
        <div>创建时间：2024-08-06</div>
      </div>
    </div>
    <div
      class="flex"
      style="
        background: rgba(25, 110, 255, 0.05);
        padding: 12px;
        border-radius: 4px;
      "
    >
      <div
        class="flex_1 flex flex_column align_center"
        style="margin-right: 10px"
      >
        <div>未检查</div>
        <div style="color: rgba(0, 0, 0, 0.6); font-size: 24px">
          {{ detailDate?.count?.wjc_node ?? 0 }}
        </div>
      </div>
      <div
        class="flex_1 flex flex_column align_center"
        style="margin-right: 10px"
      >
        <div>已检查</div>
        <div style="color: #26c118; font-size: 24px">
          {{ detailDate?.count?.yjc_node ?? 0 }}
        </div>
      </div>
      <div class="flex_1 flex flex_column align_center">
        <div>隐患</div>
        <div style="color: #c11e18; font-size: 24px">
          {{ detailDate?.count?.yh_node ?? 0 }}
        </div>
      </div>
    </div>
    <!-- 进度流程 border-top: 1px solid rgba(0, 0, 0, .15);-->
    <a-tabs default-active-key="1">
      <a-tab-pane key="1" title="巡查节点">
        <a-timeline>
          <a-timeline-item
            :label="ite.created_at"
            v-for="(ite, ind) in detailDate?.info"
            :key="ind"
          >
            <div>
              <div
                class="flex justify_between align_center"
                style="margin-bottom: 12px"
              >
                <div style="font-size: 18px; font-weight: 600">
                  {{ ite.node_info }}
                </div>
                <a-tag
                  :color="
                    ite.inspect_status == 1
                      ? 'orangered'
                      : ite.inspect_status == 2
                      ? 'green'
                      : 'red'
                  "
                  >{{
                    ite.inspect_status == 1
                      ? "待巡检"
                      : ite.inspect_status == 2
                      ? "正常"
                      : "隐患"
                  }}</a-tag
                >
              </div>
              <div style="font-size: 12px; color: rgba(0, 0, 0, 0.4)">
                {{ ite?.demand }}
              </div>
              <div
                style="
                  padding: 12px;
                  border-radius: 8px;
                  background: #f6f6f6;
                  margin-top: 12px;
                  color: rgba(0, 0, 0, 0.4);
                "
                v-if="ite.inspect_status != 1"
              >
                <div class="flex justify_between">
                  <div class="flex_1">{{ ite.incident_text }}</div>
                  <div style="margin-left: 24px" v-if="ite.secure_status == 1">
                    <a-tag color="green" bordered>已生成安全事件</a-tag>
                  </div>
                </div>
                <div class="flex flex_wrap" style="margin-top: 12px">
                  <div
                    class="pointer"
                    style="margin-bottom: 10px; margin-right: 10px"
                    v-for="(items, indexs) in ite?.incident_image"
                    :key="indexs"
                  >
                    <a-image
                      width="60"
                      height="60"
                      :src="items.url"
                      v-if="items.type == 'img'"
                    />
                    <video
                      :src="items.url"
                      style="width: 60px; height: 60px"
                      v-if="items.type == 'video'"
                      @click="handleVideo(items.url)"
                    ></video>
                  </div>
                </div>
                <div class="flex" style="margin-top: 12px">
                  <div style="margin-right: 200px">
                    巡检人：{{ ite.inspect_id.nickname }}
                  </div>
                  <div>{{ ite.complete_time }}</div>
                </div>
                <div
                  class="flex"
                  style="margin-top: 12px"
                  v-if="ite.measure_text"
                >
                  <div>整改意见：</div>
                  <div>{{ ite.measure_text }}</div>
                </div>
              </div>
            </div>
          </a-timeline-item>
        </a-timeline>
      </a-tab-pane>
    </a-tabs>

    <div class="more" v-if="isShowVideo" @click="handleColse"></div>
    <div class="video" v-if="isShowVideo">
      <video
        :src="videoUrl"
        controls
        :autoplay="true"
        style="width: 1000px; height: 562.5px"
      ></video>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, defineProps, onMounted, defineEmits } from "vue";
import secureEventManage from "@/api/secure/secureEventManage";
import { Message } from "@arco-design/web-vue";
import { request } from "@/utils/request.js";
import tool from "@/utils/tool";
import * as common from "@/utils/common";
import commonApi from "@/api/common";
const props = defineProps({
  info: {
    default: {},
  },
});
const emits = defineEmits(["shuaxin"]);
const shenValue = ref("");
const shenText = ref("");
const shenList = [
  { label: "通过", value: "1" },
  { label: "不通过", value: "2" },
];
const detailDate = ref({});
onMounted(() => {
  request({
    url: "secure/inpectionDistribute/getIndex_info",
    method: "get",
    params: {
      id: props.info.id,
    },
  }).then((res) => {
    let _data = res.data;
    let imageRegex = /\.(jpg|jpeg|png|gif)$/i;
    let videoRegex = /(mp4|avi|mov)/i;
    _data.map((v, i) => {
      if (v.info != null) {
        v.info.map((vv, ii) => {
          let infoUrl = [];
          let infoUrls = [];
          let types = "";
          if (vv.incident_image == null) {
            vv.incident_image = [];
          } else {
            infoUrl = vv.incident_image.split(",");
            infoUrl.map((vvv, iii) => {
              if (imageRegex.test(vvv)) {
                types = "img";
              }
              if (videoRegex.test(vvv)) {
                types = "video";
              }
              infoUrls.push({ url: vvv, type: types });
            });
            vv.incident_image = infoUrls;
          }
        });
      }
    });
    detailDate.value = _data[0];
  });
});
const isShowVideo = ref(false);
const videoUrl = ref("");
const eventTypeList = ref([]);

const handleEventype = (e) => {
  let name = "";
  eventTypeList.value.map((v, i) => {
    if (v.key == e) {
      name = v.title;
    }
  });
  return name;
};

const handleVideo = (e) => {
  videoUrl.value = e;
  isShowVideo.value = true;
};
const handleColse = () => {
  isShowVideo.value = false;
};
</script>
<style scoped lang="less">
.cell {
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.15);
}
.pointer {
  cursor: pointer;
}
.more {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
}
.video {
  width: 1000px;
  height: 562.5px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}
</style>
<script>
export default { name: "secure:inpectionDistribute:detail" };
</script>
